<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹性盒子作业</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }

        .center{
            width: 1000px;
            margin: 0 auto;
            background-color: #ffffff;


        }
        ul{
            list-style: none;
        }
        body{
            background-color: #f5f5f5;
        }
        /*第一层次*/
        .top {
            width: 1000px;
            height: 40px;
            background-image: linear-gradient(#f5f4f5,#e6e6e5);
            box-shadow: 0 2px 5px #aaa;
            display: flex;
            justify-content: space-between;
            align-items: center;

        }
        /*第一层按钮*/
        .top>button{
            border: 0;
            border-radius: 5px;
            height: 30px;
            padding: 0 10px;
            color: #fff;
            margin: 0 5px;


        }
        .top>.b1{
            background-color: #ffaf0f;
        }
        .top>.b2{
            background-color: #bbbbbb;
        }
    /*    第二层主区*/
        .main>ul{
            height: 620px;
            display: flex;

            flex-wrap: wrap;

            background-color: #ffffff;
            justify-content: space-evenly;
            align-content: space-evenly;

        }
        li{
            width: 230px;
            height: 280px;
            border: 1px solid #999;

        }
        img{
            width: 100%;
        }
        a{
            display: block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #000;
            font-size: 12px;
            margin: 5px 0;
            text-decoration: none;


        }




    </style>

</head>
<body>
    <div class="center">
        <div class="top">

                <button class="b1">管理收藏夹</button>
                <button class="b2">清空失效商品</button>
        </div>
        <div class="main">
            <ul>
                <li>
                    <img src="img/shoplist/shop1.jpg" >
                    <a href="#">戴尔（DELL）MS116 鼠标有线 商务办公经典对称 有线鼠标</a>
                    <h4>￥ 19.90 </h4>
                </li>
                <li>
                    <img src="img/shoplist/shop2.jpg" >
                    <a href="#">华为笔记本电脑MateBook D 14 SE版 14英寸 11代酷睿 i5</a>
                    <h4>￥ 3899.00</h4>
                </li>
                <li>
                    <img src="img/shoplist/shop3.jpg" >
                    <a href="">雷柏（Rapoo） V500PRO 机械键盘 有线键盘 游戏键盘 104键混光键盘</a>
                    <h4>￥ 109.00</h4>
                </li>
                <li>
                    <img src="img/shoplist/shop4.jpg" >
                    <a href="#">先马（SAMA）平头哥M1电竞版 Mini小机箱 支持MATX主板240水冷</a>
                    <h4>￥ 179.00</h4>
                </li>
                <li>
                    <img src="img/shoplist/shop5.jpg" >
                    <a href="#">英特尔i5 10400F/10600KF i511400F </a>
                    <h4>￥ 1299.00</h4>
                </li>
                <li>
                    <img src="img/shoplist/shop6.jpg" >
                    <a href="#">金士顿（Kingston）32GB USB3.2 Gen 1 U盘 DTX</a>
                    <h4>￥ 27.90</h4>
                </li>
                <li>
                    <img src="img/shoplist/shop7.jpg" >
                    <a href="#">罗技（Logitech）C270高清网络摄像头 网课 摄像头家用 视频通话 带麦克风台式机电脑摄像头</a>
                    <h4>￥119.00</h4>
                </li>
                <li>
                    <img src="img/shoplist/shop8.jpg" >
                    <a href="#">微软 Xbox Elite 无线控制器2代 二代精英手柄 无线手柄 蓝牙手柄 自定义设置/按键 Type C接口</a>
                    <h4>￥ 1398.00</h4>
                </li>


            </ul>

        </div>
    </div>

</body>
</html>